import React from "react";
import {Card, Row, Tooltip, Col} from "antd";
import {SettingOutlined, QuestionCircleOutlined} from '@ant-design/icons'
import TheDialog from "../../../../components/TheDialog";
import UpdateForm from "../updateForm";
import '../../style/style.less'
import TheImage from "../../../../components/TheImage";
import upTriangle from '@/assets/icons/upTriangle.png'
import downTriangle from '@/assets/icons/downTriangle.png'
import {SortableContainer, SortableElement, SortableHandle} from "react-sortable-hoc";
import TheButton from "../../../../components/TheButton";
import {MenuOutlined} from '@ant-design/icons';
import arrayMove from "array-move";
import {apiGetAuthSetOrderMath} from '@/request/system/home'

const DragHandle = SortableHandle(() => <MenuOutlined style={{cursor: 'grab', color: '#999'}}/>);
const SortableItem = SortableElement(({v, editMode}) => {
    return <div className={'plus-card'}>
        <Card title={
            <div style={{display: "flex", justifyContent: "space-between"}}>
                <div>
                    {v.title}
                    <Tooltip title={v.tip}>
                        <QuestionCircleOutlined/>
                    </Tooltip>
                    <p style={{
                        color: "#999999",
                        fontSize: 14,
                        marginTop: 12
                    }}>
                        {/*<span>{v.dateBegin}~{v.dateEnd}</span>*/}
                        <span>{v.time}</span>
                    </p>
                </div>
                {editMode && <DragHandle/>}
            </div>}
              bordered={false}>
            <p className={'card-important'}><span>{v.val}</span> {v.valUnit}</p>
            <p>
                环比
                <span className={`${v.hb > 0 ? 'card-hb-up' : v.hb < 0 ? 'card-hb-down' : ''}`}>
                                    {v.hb > 0 ? <TheImage src={upTriangle} width={12}/> : v.hb < 0 ?
                                        <TheImage src={downTriangle} width={12}/> : ''}
                    <span className={'card-num'}>{Math.abs(v.hb * 1)} %</span>
                            </span>
                同比
                <span className={`${v.tb > 0 ? 'card-tb-up' : v.tb < 0 ? 'card-tb-down' : ''}`}>
                                    {v.tb > 0 ? <TheImage src={upTriangle} width={12}/> : v.tb < 0 ?
                                        <TheImage src={downTriangle} width={12}/> : ''}
                    <span className={'card-num'}>{Math.abs(v.tb * 1)} %</span>
                                </span>
            </p>
        </Card>
    </div>
});

const SortableList = SortableContainer(({children}) => {
    return <>{children}</>
});

class PlusCard extends React.Component {
    state = {
        dataSource: null,
        sortData: []
    }

    async componentDidMount() {
        await this.getData()
    }

    async componentDidUpdate(prevProps, prevState, snapshot) {
        const preDateType = prevProps.dateType;
        const preEditMode = prevProps.editMode;
        const {dateType, editMode} = this.props;
        if (preDateType !== dateType) {
            await this.getData()
        }
        if (preEditMode && !editMode) {
            const jsonStr = this.state.sortData.join(',')
            const response = await apiGetAuthSetOrderMath({jsonStr})
            if (response.code === 0) {
                await this.getData()
            }
        }
    }

    getData = async () => {
        const {dateType} = this.props;
        const response = await React.$get(`/management/admin/auth/getIndex?dateType=${dateType}`)
        if (response.code === 0) {
            this.setState({
                dataSource: response.data
            })
        }
    }

    sortEnd = ({oldIndex, newIndex}) => {
        this.setState(({dataSource}) => ({
            dataSource: arrayMove(dataSource, oldIndex, newIndex),
        }), () => {
            const data = this.state.dataSource.map(v => v.id)
            this.setState({
                sortData: data
            })
        })
    }

    render() {
        const {dataSource} = this.state
        const {editMode} = this.props
        return <SortableList axis={'xy'} onSortEnd={this.sortEnd} useDragHandle>
            <div className={'grid-card'}>
                {
                    dataSource && dataSource.map((v, i) => {
                        return <SortableItem key={i} index={i} editMode={editMode} v={v}/>
                    })
                }
            </div>
        </SortableList>
    }
}

export default PlusCard;